var line_size = 1;

var line_half_size = line_size / 2;

var line_initColor = initBorderColor;
var line_color = initBorderColor;
var line_over_color = overBorderColor;
//箭头高度
var line_arrow_length = 14; 

function Line(params, workflowDiv) {
	this.x1 = params.x1;
	this.y1 = params.y1;
	this.w1 = 0;
	this.h1 = 0;
	
	this.x2 = params.x2;
	this.y2 = params.y2;
	this.w2 = 0;
	this.h2 = 0;
	
	this.x3 = params.x3;
	this.y3 = params.y3;
	this.w3 = 0;
	this.h3 = 0;
	
	this.x4 = params.x4;
	this.y4 = params.y4;
	
	this.type = params.type;
	this.name = params.name;
	this.descText = params.desc;
	this.lx = params.lx;
	this.ly = params.ly;
	
	this.lineColor = line_color;
	this.workflowDiv = workflowDiv;
}

Line.prototype = {

	constructor : Line,
	
	line1 : null,
	line2 : null,
	line3 : null,
	arrow : null,
	dir : null,

	show : function() {
		this.initDiv();
	},

	initDiv : function() {
		if(this.type == "DTLine") {
			this.dir = "down";
			this.initDT();
		} else if(this.type == 'DLLine') {
			this.dir = "right";
			this.initDL();
		} else if(this.type == 'DRLine') {
			this.dir = "left";
			this.initDR();
		} else if(this.type == 'DDLine') {
			this.dir = "up";
			this.initDD();
		} else if(this.type == "LLLine") {
			this.dir = "right";
			this.initLL();
		} else if(this.type == "LTLine") {
			this.dir = "down";
			this.initLT();
		} else if(this.type == "LDLine") {
			this.dir = "up";
			this.initLD();
		} else if(this.type == "LRLine") {
			this.dir = "left";
			this.initLR();
		} else if(this.type == 'RRLine') {
			this.dir = "left";
			this.initRR();
		} else if(this.type == 'RLLine') {
			this.dir = "right";
			this.initRL();
		} else if(this.type == 'RTLine') {
			this.dir = "down";
			this.initRT();
		} else if(this.type == 'RDLine') {
			this.dir = "up";
			this.initRD();
		} else if(this.type == "TDLine") {
			this.dir = "up";
			this.initTD();
		} else if(this.type == "TTLine") {
			this.dir = "down";
			this.initTT();
		} else if(this.type == "TLLine") {
			this.dir = "right";
			this.initTL();
		} else if(this.type == "TRLine") {
			this.dir = "left";
			this.initTR();
		} 
		this.draw();
	},
	
	initDL : function() {
		this.x1 = this.x1;
		this.y1 = this.y1;
		this.w1 = line_size;
		this.h1 = this.y2 - this.y1;
		
		this.x2 = this.x1;
		this.y2 = this.y2;
		this.w2 = this.x3 - this.x2;
		this.h2 = line_size;
		
		this.arrowX = this.x3 - line_arrow_length;
		this.arrowY = this.y3 - 3 - line_half_size;
	},
	
	initDR : function() {
		this.x1 = this.x1;
		this.y1 = this.y1;
		this.w1 = line_size;
		this.h1 = this.y2 - this.y1;
		
		var x2 = this.x2;
		this.x2 = this.x3;
		this.y2 = this.y3;
		this.w2 = x2 - this.x2;
		this.h2 = line_size;
		
		this.arrowX = this.x3;
		this.arrowY = this.y3 - 4;
	},
	
	initDT : function() {
		this.x1 = this.x1;
		this.y1 = this.y1;
		this.w1 = line_size;
		this.h1 = this.y2 - this.y1;
		
		if(this.x3 < this.x2) {			//因为DT中间线有两个方向，需要确定x的坐标
			var x2 = this.x2;
			this.x2 = this.x3;
			this.y2 = this.y3;
			this.w2 = x2 - this.x2;
			this.h2 = line_size;
		} else {
			this.x2 = this.x1;
			this.y2 = this.y2;
			this.w2 = this.x3 - this.x2;
			this.h2 = line_size;
		}
		
		this.x3 = this.x3;
		this.y3 = this.y2;
		this.w3 = line_size;
		this.h3 = this.y4 - (this.y3);	//+4 是因为有箭头，为了因为线的像素为2，箭头不尖锐，所以要减去4
		
		this.arrowX = this.x4 - 3 - line_half_size;
		this.arrowY = this.y4 - line_arrow_length;
	},
	
	initDD : function() {
		this.x1 = this.x1;
		this.y1 = this.y1;
		this.w1 = line_size;
		this.h1 = this.y2 - this.y1;
		
		if(this.x2 < this.x3) {
			this.x2 = this.x2;
			this.y2 = this.y2;
			this.w2 = this.x3 - this.x2;
			this.h2 = line_size;
		} else {
			var w = this.x2 - this.x3;
			this.x2 = this.x3;
			this.y2 = this.y3;
			this.w2 = w;
			this.h2 = line_size;
		}
		
		var y3 = this.y3;
		this.x3 = this.x4;
		this.y3 = this.y4;
		this.w3 = line_size;
		this.h3 = y3 - (this.y3);
		
		this.arrowX = this.x4 - 4;
		this.arrowY = this.y4;
	},
	
	initLL : function() {
		var x1 = this.x1;
		this.x1 = this.x2;
		this.y1 = this.y1;
		this.w1 = x1 - this.x1;
		this.h1 = line_size;
		
		if(this.y3 > this.y2) {
			this.w2 = line_size;
			this.h2 = this.y3 - this.y2;
		} else {
			var y2 = this.y2;
			this.x2 = this.x3;
			this.y2 = this.y3;
			this.w2 = line_size;
			this.h2 = y2 - this.y3;
		}
		
		this.x3 = this.x3;
		this.y3 = this.y3;
		this.w3 = this.x4 - this.x3;
		this.h3 = line_size;
		
		this.arrowX = this.x4 - line_arrow_length;
		this.arrowY = this.y4 - 4;
	},
	
	initLT : function() {
		var x1 = this.x1;
		this.x1 = this.x2;
		this.y1 = this.y1 ;
		this.w1 = x1 - this.x1;
		this.h1 = line_size;
		
		this.x2 = this.x2;
		this.y2 = this.y2;
		this.w2 = line_size;
		this.h2 = this.y3 - this.y2;
		
		this.arrowX = this.x3 - 3 - line_half_size;
		this.arrowY = this.y3 - line_arrow_length;
	},
	
	initLD : function() {
		var x1 = this.x1;
		this.x1 = this.x2;
		this.y1 = this.y1;
		this.w1 = x1 - this.x1;
		this.h1 = line_size;
		
		var y2 = this.y2;
		this.x2 = this.x3;
		this.y2 = this.y3;
		this.w2 = line_size;
		this.h2 = y2 - this.y2;
		
		this.arrowX = this.x3 - 3 - line_half_size;
		this.arrowY = this.y3;
	},
	
	initLR : function() {
		var x1 = this.x1;
		this.x1 = this.x2;
		this.y1 = this.y1;
		this.w1 = x1 - this.x1;
		this.h1 = line_size;
		
		if(this.y3 < this.y2) {
			var y2 = this.y2;
			this.x2 = this.x3;
			this.y2 = this.y3;
			this.w2 = line_size;
			this.h2 = y2 - this.y2;
		} else {
			this.x2 = this.x2;
			this.y2 = this.y2;
			this.w2 = line_size;
			this.h2 = this.y3 - this.y2;
		}
		
		var x3 = this.x3;
		this.x3 = this.x4;
		this.y3 = this.y4;
		this.w3 = x3 - this.x3;
		this.h3 = line_size;
		
		this.arrowX = this.x4;
		this.arrowY = this.y4 - 4;
	},
	
	initRR : function() {
		this.x1 = this.x1 ;
		this.y1 = this.y1;
		this.w1 = this.x2 - this.x1;
		this.h1 = line_size;
		
		if(this.y3 > this.y2) {
			var y2 = this.y2;
			this.x2 = this.x2;
			this.y2 = this.y2;
			this.w2 = line_size;
			this.h2 = this.y3 - this.y2;
		} else {
			var y2 = this.y2;
			this.x2 = this.x3;
			this.y2 = this.y3;
			this.w2 = line_size;
			this.h2 = y2 - this.y3;
		}
		
		var x3 = this.x3;
		this.x3 = this.x4;
		this.y3 = this.y4;
		this.w3 = x3 - this.x3;
		this.h3 = line_size;
		
		this.arrowX = this.x4;
		this.arrowY = this.y4 - 3 - line_half_size;
	},
	
	initRL : function() {
		this.x1 = this.x1;
		this.y1 = this.y1;
		this.w1 = this.x2 - this.x1;
		this.h1 = line_size;
		
		if(this.y3 < this.y2) {
			var y2 = this.y2;
			this.x2 = this.x3;
			this.y2 = this.y3;
			this.w2 = line_size;
			this.h2 = y2 - this.y2;
		} else {
			this.x2 = this.x2;
			this.y2 = this.y2;
			this.w2 = line_size;
			this.h2 = this.y3 - this.y2;
		}
		
		this.x3 = this.x3;
		this.y3 = this.y3;
		this.w3 = this.x4 - this.x3;
		this.h3 = line_size;
		
		this.arrowX = this.x4 - line_arrow_length;
		this.arrowY = this.y4 - 3 - line_half_size;
	},
	
	initRT : function() {
		this.x1 = this.x1;
		this.y1 = this.y1;
		this.w1 = this.x2 - this.x1;
		this.h1 = line_size;
		
		this.x2 = this.x2;
		this.y2 = this.y2;
		this.w2 = line_size;
		this.h2 = this.y3 - this.y2;
		
		this.arrowX = this.x3 - 3 - line_half_size;
		this.arrowY = this.y3 - line_arrow_length;
	},
	
	initRD : function() {
		
		this.x1 = this.x1;
		this.y1 = this.y1;
		this.w1 = this.x2 - this.x1;
		this.h1 = line_size;
		
		var y2 = this.y2;
		this.x2 = this.x3;
		this.y2 = this.y3;
		this.w2 = line_size;
		this.h2 = y2 - this.y2;
		
		this.arrowX = this.x3 - 4;
		this.arrowY = this.y3;
	},
	
	initTD : function() {
		var y1 = this.y1;
		this.x1 = this.x2;
		this.y1 = this.y2;
		this.w1 = line_size;
		this.h1 = y1 - this.y1;
		
		if(this.x3 < this.x2) {
			var x2 = this.x2;
			this.x2 = this.x3;
			this.y2 = this.y3;
			this.w2 = x2 - this.x2;
			this.h2 = line_size;
		} else {
			this.x2 = this.x1;
			this.y2 = this.y2;
			this.w2 = this.x3 - this.x2;
			this.h2 = line_size;
		}
		
		var y3 = this.y3;
		this.x3 = this.x4;
		this.y3 = this.y4;
		this.w3 = line_size;
		this.h3 = y3 - this.y3;
		
		this.arrowX = this.x4 - 3 - line_half_size;
		this.arrowY = this.y4;
	},
	
	initTT : function() {
		var y1 = this.y1;
		this.x1 = this.x2;
		this.y1 = this.y2;
		this.w1 = line_size;
		this.h1 = y1 - this.y1;
		
		this.x2 = this.x1;
		this.y2 = this.y2;
		this.w2 = this.x3 - this.x2;
		this.h2 = line_size;
		
		this.x3 = this.x3;
		this.y3 = this.y3;
		this.w3 = line_size;
		this.h3 = this.y4 - this.y3;
		
		this.arrowX = this.x4 - 3 - line_half_size;
		this.arrowY = this.y4 - line_arrow_length;
	},
	
	initTL : function() {
		var y1 = this.y1;
		this.x1 = this.x2;
		this.y1 = this.y2;
		this.w1 = line_size;
		this.h1 = y1 - this.y1;
		
		this.x2 = this.x1;
		this.y2 = this.y2;
		this.w2 = this.x3 - this.x2;
		this.h2 = line_size;
		
		this.arrowX = this.x3 - line_arrow_length;
		this.arrowY = this.y3 - 3 - line_half_size;
	},
	
	initTR : function() {
		var y1 = this.y1;
		this.x1 = this.x2;
		this.y1 = this.y2;
		this.w1 = line_size;
		this.h1 = y1 - this.y1;
		
		var x2 = this.x2;
		this.x2 = this.x3;
		this.y2 = this.y3;
		this.w2 = x2 - this.x2;
		this.h2 = line_size;
		
		this.arrowX = this.x3;
		this.arrowY = this.y3 - 3 - line_half_size;
	},
	
	draw : function() {
		var body = this.workflowDiv;
		var desc = $("<div style='position:inherit;cursor:pointer;width:" + (this.descText.replace(/[\u0391-\uFFE5]/g,"aa").length * 7) + "px;'>" + this.descText + "</div>");
		desc.css("left", this.lx);
		desc.css("top", this.ly );
		
		var line1 = $("<div style='cursor:pointer;background:" + line_color + "'></div>");
		line1.css("left", this.x1);
		line1.css("top", this.y1 );
		line1.css("width", this.w1);
		line1.css("height", this.h1);
		line1.attr("class", "line");
		
		var line2 = $("<div style='cursor:pointer;background:" + line_color + "'></div>");
		line2.css("left", this.x2);
		line2.css("top", this.y2 );
		line2.css("width", this.w2);
		line2.css("height", this.h2);
		line2.attr("class", "line");
		
		var line3 = $("<div style='cursor:pointer;background:" + line_color + "'></div>");
		line3.css("left", this.x3);
		line3.css("top", this.y3 );
		line3.css("width", this.w3);
		line3.css("height", this.h3);
		line3.attr("class", "line");
		
		var arrow = $("<div style='cursor:pointer;position: absolute;'></div>");
		//设置【箭头指向】和【箭头颜色】
		if(this.dir == "down") {
			arrow.attr("class", "arrow-down");
			arrow.css("border-top-color", line_color);
		} else if(this.dir == "right") {
			arrow.attr("class", "arrow-right");
			arrow.css("border-left-color", line_color);
		} else if(this.dir == "left") {
			arrow.attr("class", "arrow-left");
			arrow.css("border-right-color", line_color);
		} else if(this.dir == "up") {
			arrow.attr("class", "arrow-up");
			arrow.css("border-bottom-color", line_color);
		}
		//设置【箭头坐标】
		arrow.css("left", this.arrowX);
		arrow.css("top", this.arrowY );
		
		body.append(line1);
		body.append(line2);
		body.append(line3);
		body.append(arrow);
		body.append(desc);
		this.line1 = line1;
		this.line2 = line2;
		this.line3 = line3;
		this.arrow = arrow;
		this.desc = desc;
		
		//添加【mouseover事件】和【mouseout事件】
		line1.bind("mouseover", this, this.over);
		line2.bind("mouseover", this, this.over);
		line3.bind("mouseover", this, this.over);
		arrow.bind("mouseover", this, this.over);
		desc.bind("mouseover", this, this.over);
		line1.bind("click", this, this.click);
		line2.bind("click", this, this.click);
		line3.bind("click", this, this.click);
		arrow.bind("click", this, this.click);
		desc.bind("click", this, this.click);
		line1.bind("mouseout", this, this.out);
		line2.bind("mouseout", this, this.out);
		line3.bind("mouseout", this, this.out);
		arrow.bind("mouseout", this, this.out);
		desc.bind("mouseout", this, this.out);
		return body;
	},
	
	setColor : function(color) {
		$this = this;
		$this.line1.css("background-color", color);
		$this.line2.css("background-color", color);
		$this.line3.css("background-color", color);
		$this.desc.css("color", color);
		if($this.dir == 'down') {
			$this.arrow.css("border-top-color", color);
		} else if($this.dir == 'right') {
			$this.arrow.css("border-left-color", color);
		} else if($this.dir == 'left') {
			$this.arrow.css("border-right-color", color);
		} else if($this.dir == 'up') {
			$this.arrow.css("border-bottom-color", color);
		} 
	},
	
	reset : function() {
		this.setColor(this.lineColor);
	},
	
	over : function(event) {
		var $this = event.data;
		// 点击颜色red 优先级高于 over 的颜色
		if($this.lineColor == 'red') {
			return ;
		}
		$this.lineColor = line_over_color;
		$this.reset();
	},
	
	out : function(event) {
		var $this = event.data;
		if($this.lineColor == 'red') {
			return ;
		}
		$this.lineColor = line_initColor;
		$this.reset();
	},
	
	click : function(event) {
		var $this = event.data;
		if($this.lineColor == 'red') {
			$this.lineColor = line_initColor;
		} else {
			$this.lineColor = 'red';
		}
		$this.reset();
	}

}